@import '~@/styles/variable.scss';

.custom-report-list-main-container {
  @include ps-r;
  .report-list-container {
    width: 1200px;
    margin: 0 auto;
    .controller-bar {
      @include default-flex;
      justify-content: flex-start;
      padding: 2rem;
      > i {
        margin-right: 2rem;
      }
    }
    .report-list {
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      max-height: 500px;
      .report-item {
        width: 20%;
        height: 150px;
        margin: 1rem;
        background-color: #666;
        border-radius: 5px;
        box-shadow: 1px 1px 1px#999;
        position: relative;
        .report-type {
          @include ellipsis;
          position: absolute;
          color: white;
          width: 100%;
          top: 5%;
          left: 5%;
        }
        .report-info {
          @include ellipsis;
          position: absolute;
          text-align: center;
          color: white;
          width: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .shade {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.3);
          display: flex;
          .shade-edit-view {
            width: 50%;
            @include default-flex;
            flex-flow: column;
            justify-content: space-around;
          }
          .shade-del {
            width: 50%;
            @include default-flex;
          }
        }
      }
    }
  }

  .default-icon {
    font-size: 2.5rem;
    cursor: pointer;
  }
}
